pp108 : Google Maps

Google Maps

  

The Google Maps control is used to display the Google Maps in an XForm. This control enables you to create map views in your application.

You can use the Google APIs to program the custom functionalities in Google Maps.

You can use the message map to create associations between this control and any required model. The mapping that you define between the control and the model is stored in a mapping object.

Note:
Process Platform has upgraded the Google Maps control to match the Google Maps Javascript API Version 3 changes. The forms based on the earlier version can be retained, as the control is backward-compatible. Also, the latest version of Google Maps does not require a Google Maps API key.

Schema

Process Platform XForms provides a schema for the Google Maps control using which Google Maps data can be mapped with a data source. Using the schema, you can easily access and bind data to the control. This schema is as follows.

<BusinessObject>
    <UniqueId/>
    <MarkerAttribute/>
    <Location>
        <Country/>
        <AdministrativeArea/>
        <SubAdministrativeArea/>
        <Locality/>
        <Thoroughfare/>
        <PostalCode/>
    </Location>
    <InfoWindow>
        <Title/>
        <Content/>
    </InfoWindow>
</BusinessObject>

Process Platform XForms provides a message map to map data. For information, see Using Message Map.

Schema Element

Description

UniqueId

This element denotes the unique identifier for a set of records rendered on the Google Maps. For example, an employeeId can be set as the UniqueId using the message map. If no UniqueId is specified, no records are rendered on the Google Maps.

MarkerAttribute

This element denotes the attribute based on which you want to create a customized marker.Let us assume a scenario where you want to create custom markers based on the Designation of the employees. In the same context, you may want to mark all the employees with Manager as their designation in green markers. To achieve this, do the following:

  1. Map the required parameter to the MarkerAttribute using the message map.
  2. In the Property sheet of the Google Maps, provide the Icon Attribute and the corresponding Icon URL.
    Relating this to our example, you must map Designation to the MarkerAttribute, map Manager as the Icon Attribute, and provide the URL of the green marker icon. This results in green colored markers against all the Managers.

Location

This element denotes the location on the map at which the record will be rendered. To specify the accurate location on the Google Maps, the following elements are available in the schema - Country, AdministrativeArea, SubAdministrativeArea, Locality, Thoroughfare, and PostalCode.

Country

This element denotes the country name of the location.

AdministrativeArea

This element is optional and denotes the state name of the location.

SubAdministrativeArea

This element is optional and denotes the district name of the location.

Locality

This element is optional and denotes the city, town, or village name of the location.

Thoroughfare

This element is optional and denotes the street name or the road name with the door number of the location.

PostalCode

This element is optional and denotes the postal code of the location.

InfoWindow

This element is optional and is used to specify details of a record that will display in a small window when a marker is selected in the map. You can use the message map to specify the details to be displayed. Following are the elements under InfoWindow that can be mapped.

  • Title: You can map any node from the Model data to this element. The value of the node will display as tooltip on the marker at run time.
  • Content: The child elements under this element denote the details that are displayed when a marker is selected in the map. At least one child element must be available for the Infowindow to display. To add a child element, right-click Content, select Add Child, and type a name.

    Note:
    Do not map elements to the Content element itself.

In order to display details of a location in a window, you need to extend the schema by adding elements to the BusinessObject element of the schema. To do so, open the message map of the model used in the control, expand the BusinessObject > InfoWindow elements in the Target pane, right-click the Content element , and select Add Child. A new node is added to schema. You can modify the node to define the new element.

Properties and Methods of the Control

The properties and methods associated with the Google Maps control define its behavior. You can set them either through the control's property sheet or programmatically using the APIs.

Table 1. List of Properties

Design-time property

Run-time property

Description

ID

id

Sets the string that identifies the control on an XForm. If not specified, a unique ID is automatically generated.

Class Name

className

Sets or retrieves the class name applied on the control.

Center Address

centerAddress

Sets the center point of the map. You can specify the address to be set as the center.

Center Coordinates

centerCoordinates

Optional. Sets the center coordinates of the map. It is specified in the latitude,longitude format, such as97.06,12.23.

Note:
Only if the Center Address is not specified or if the specified center (address) is not resolvable, the coordinates are used to set the center.

Zoom Level

zoomLevel

Sets the default zoom level of the map. Bigger the integer value that you defined, greater is the zoom in.

Zoom on Double Click

doubleClickZoom

Defines whether double-clicking of map to zoom it is enabled or disabled.

Smooth Zoom on Double Click

smoothZoom

Defines whether continuous smooth zooming is enabled or not.

Zoom on Mouse Scroll

scrollWheelZoom

Defines whether zooming on mouse wheel scroll is enabled or not.

Dragable by Mouse

dragable

Defines whether the map in the Google Maps control can be dragged using mouse or not. Dragging a map makes it possible to change the geographic region viewed in the map.

Show all records

nodeset

Marks all the entries on the map.

Map Control

mapControl

Displays a slider that can be used to zoom in, zoom out, and (vertically and horizontally) scroll through the map. You can set the following for the Map Control.

  • none: Map control is not displayed.
  • small: Map control is displayed and its size is set as small.
  • large: Map control is displayed and its size is set as big.

Icon Attribute

  

Defines the attribute based on which you want to create a custom marker.For more information, refer to the description of MarkerAttribute element above.

Icon URL

  

Defines the URL of the location, where you can access the icon.
Table 2. List of Methods

Method

Description

getGMapObject()

Returns the Map class.

getObjectFactory()

Returns the handle of the window object. This object is used to create instances of the classes provided by Google Maps APIs.

setCenterByCoordinates(coordinates, zoomLevel)

Sets the specified coordinates (latitude and longitude) as the center of the map. Possible parameters are:

  • coordinates: Refers to the coordinates (latitude and longitude) at which the center is to be set. Example: 15.50, 72.261
  • zoomLevel: Refers to the zoom level to be set for the map.

setCenterByAddress(address, zoomLevel)

Sets the specified address as the center of the map. Possible parameters are:

  • address: Refers to the address at the which the center is to be set. Example: ,New York, Hyderabad
  • zoomLevel: Refers to the zoom level to be set for the map.

drawMarkerByCoordinates(coordinates, toPan)

Draws a marker that points a position on the map at the specified coordinates. Possible parameters are:

  • coordinates: Refers to the coordinates (latitude and longitude) at which the marker has to be drawn. Example: 15.50, 72.261
  • toPan: Specifies whether panning can be enabled for the map. Panning refers to the movement of the Google Maps to display the marker in the visible map area. Possible values are:
    • true - Panning is enabled.
    • false - Panning is disabled.

drawMarkerByAddress(address, toPan, callback)

Draws a marker that points a position on the map at the specified address. Possible parameters are:

  • address: Refers to the address at the which a marker has to be drawn.
  • toPan: Specifies whether panning can be enabled for the map. Panning refers to the movement of the Google Maps to display the marker in the visible map area. Possible values are:
    • true - Panning is enabled.
    • false - Panning is disabled.
  • callback: Specifies the pointer to the function that must be executed after the marker is drawn.

getCoordinates(address, callback)

Returns the coordinates of the address specified. Possible parameters are:

  • address: Refers to the address for which the coordinates are to be retrieved.
  • callback: Specifies the pointer to the function that must be executed after the marker is drawn.

triggerResize()

Displays the map in the required size when used in a hidden tab. Whenever a Google Maps is used in a tab that is not focused by default, if you click the tab containing the map, the entire map is not displayed as shown in the sample code below:

<html onselect="selectApplication()">
    <head>
        <title>Googlemap</title>
        <script src="/cordys/wcp/application.js" type="text/javascript"/>
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"/>
        <script type="text/javascript"> function load() { document.getElementById("googlemap").style.display="none"; } function showClicked() { document.getElementById("googlemap").style.display="block"; //When the div changes the size triggerResize should be called. googlemap.triggerResize(); } </script>
    </head>
    <body onload="load()">
        <input id="button" onclick="showClicked()" type="button" value="Show map"/>
        <div centerAddress="Hyderabad,India"
            cordystype="wcp.library.util.GoogleMapV3"
            doubleClickZoom="true" dragable="true" id="googlemap"
            mapControl="large" scrollWheelZoom="true" smoothZoom="true"
            style="height: 80%; width 100%" zoomLevel="15"/>
    </body>
</html>

Note:In the above sample code, when the Google Maps is used in display:none, it is equivalent to providing the <div> with size 0; when it is changed to display:block, it indicates a change of size which triggers the map resize event. This will occur when the Google Maps is used in hidden tabs or collapsible group box. So triggerResize() should be called in ontabfocus event.

Example

This example depicts the usage of the methods described above:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html onselect="selectApplication()" >
    <head>
        <title>Googlemap</title>
        <script  type="text/javascript" src="/cordys/wcp/application.js" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"/>
        <script type="text/javascript" > function buttonClicked() {
 //The below method returns a map, with location at 15, 75 coordinates, as the center of the map. 
googlemap.setCenterByCoordinates("15,75", 9); 
//The below method returns a map, with location at 15, 75 coordinates, as the center of the map. 
googlemap.setCenterByAddress("Mothinagar, Hyderabad", 13); 
//The below method draws a marker on the map at the specified address. 
googlemap.drawMarkerByAddress("Mothinagar, Hyderabad", true); 
//The below method draws a marker on the map at the specified coordinates. 
googlemap.drawMarkerByCoordinates("15,75", true); 
} 
        </script>
    </head>
    <body>
        <div cordystype="wcp.library.util.GoogleMapV3" id="googlemap" style="height: 80%; width 100%" dragable="true" smoothZoom="true" doubleClickZoom="true" scrollWheelZoom="true" zoomLevel="8" mapControl="large" centerAddress="Hyderabad,India" />
        <button onclick="buttonClicked()">Click</button>
    </body>
</html>